<!--设备监控-->
<template>
<div>
	<!--S 统计-->
	<el-row class="statistics" :gutter="15">
		<el-col :span="8">
			<a href="javascript:;" class="panel panel_01">
				<div class="icon_wrap">
					<img class="icon" src="~@/assets/img/icon_monitoring.png" />
				</div>
				<div class="info">
					<div class="tit">注册设备</div>
					<div class="count">
						<span class="num">1888</span>
						<span class="unit">台</span>
					</div>
					<div class="desc">使用中25台，停用<span class="c_red">26</span>台</div>
				</div>
			</a>
		</el-col>
		<el-col :span="2" class="tip">其中</el-col>
		<el-col :span="7">
			<div class="panel panel_02">
				<div class="icon_wrap">
					<img class="icon" src="~@/assets/img/icon_communication.png" />
				</div>
				<div class="info">
					<div class="tit">通讯盒</div>
					<div class="count">
						<span class="num">569</span>
						<span class="unit">台</span>
					</div>
					<div class="desc">使用中25台，停用<span class="c_red">26</span>台</div>
				</div>
			</div>
		</el-col>
		<el-col :span="7" >
			<div class="panel panel_03">
				<div class="icon_wrap">
					<img class="icon" src="~@/assets/img/icon_control.png" />
				</div>
				<div class="info">
					<div class="tit">控制盒</div>
					<div class="count">
						<span class="num">569</span>
						<span class="unit">台</span>
					</div>
					<div class="desc">使用中25台，停用<span class="c_red">26</span>台</div>
				</div>
			</div>
		</el-col>
	</el-row>
	<!--E 统计-->
	<!--S 设备异常-->
	<el-col :span="24" class="section section_01">
		<div class="section_head">
			<h3 class="tit">设备异常</h3>
			<div class="custom_radio_group">
				<el-radio-group v-model="radio1" size="mini">
					<el-radio-button label="1">未处理异常</el-radio-button>
					<el-radio-button label="2">全部异常</el-radio-button>
				</el-radio-group>
			</div>
		</div>
		<el-row class="section_con" :gutter="15">
			<el-col :span="5" class="module_01">
				<h4 class="tit">
					<i class="el-icon-warning icon"></i>
					<span>未处理异常设备</span>
				</h4>
				<div class="count">
					<a href="javascript:;" class="num">26</a>台
				</div>
				<div class="desc">累计异常260台</div>
			</el-col>
			<el-col :span="9">
                <div id="chartPie" style="width:100%; height:300px;"></div>
			</el-col>
			<el-col :span="10">
				<div id="chartBar" style="width:100%; height:300px;"></div>
			</el-col>
		</el-row>
	</el-col>
	<!--E 设备异常-->
	<!--S 异常趋势分析-->
	<el-col :span="24" class="section section_02">
		<div class="section_head">
			<h3 class="tit">异常趋势分析</h3>
			<div class="custom_radio_group">
				<el-radio-group v-model="radio1" size="mini">
					<el-radio-button label="1">近30日</el-radio-button>
					<el-radio-button label="2">近一年</el-radio-button>
				</el-radio-group>
			</div>
		</div>
        <el-col :span="24">
            <div id="chartLine" style="width:100%; height:350px;"></div>
        </el-col>
    </el-col>
	<!--E 异常趋势分析-->
</div>
</template>
<script>
import echarts from 'echarts'
import { } from '@/api/equipment/monitoring.js'
export default {
	components: {},
	data(){
		return{
			radio1:1,
			chartPie: null,
            chartBar: null,
            chartLine: null,
		}
	},
	mounted(){
        this.drawCharts()
	},
	methods:{
		//未处理异常类型统计
        drawPieChart() {
            this.chartPie = echarts.init(document.getElementById('chartPie'));
            this.chartPie.setOption({
                color:["#14B9E1","#14F3D9","#36FF98","#0871D6","#0A94FF"],
//              color:["#0871D6","#0A94FF","#14B9E1","#14F3D9","#36FF98"],//由深到浅
                title: {
                    text: '未处理异常类型统计',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                	show:false
                },
                series: [
                    {
                        name: '未处理异常类型',
                        type: 'pie',
            			radius: ['35%', '70%'],
                        center: ['50%', '60%'],
                        // 由多到少
//                      data: [
//	                        { value: 50, name: '异常类型B,20' },
//	                        { value: 25, name: '异常设备类型C,5' },
//                          { value: 10, name: '通讯错误A,12' },
//                          { value: 7, name: '异常类型A,1' },
//                          { value: 7, name: '异常类型A,2' },
//                      ],
                        data: [
                            { value: 10, name: '通讯错误A,12' },
                            { value: 7, name: '异常类型A,1' },
                            { value: 7, name: '异常类型A,2' },
                            { value: 50, name: '异常类型B,20' },
                            { value: 25, name: '异常设备类型C,5' },
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        },
        //未处理异常设备统计
        drawBarChart() {
            this.chartBar = echarts.init(document.getElementById('chartBar'));
            this.chartBar.setOption({
                title: {
                    text: '未处理异常设备统计'
                },
                color:["#FF7200","#ff8e33","#ffaa66","#ffc799","#ffe3cc"],
//              color:["#FF7200","rgba(255, 114, 0, 0.8)","rgba(255, 114, 0, 0.6)","rgba(255, 114, 0, 0.4)","rgba(255, 114, 0, 0.2)"],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    axisLabel:{
                    	show:false
                    },
                    splitLine:{
                    	show:false
                    }
                },
                yAxis: {
                    type: 'category',
                    data: [ '其他' ,'磅表', '道闸', 'IC卡读卡器','二维码读卡器']
                },
                series: [
			        {
			            type: 'bar',
			            barWidth: '60%',
			            itemStyle:{
			            	color:function(params) {
			            		var list=["rgba(255, 114, 0, 0.2)","rgba(255, 114, 0, 0.4)","rgba(255, 114, 0, 0.6)","rgba(255, 114, 0, 0.8)","#FF7200"];
			            		return list[params.dataIndex]
			            	}
			            },
			            data: [15,30,38,45,50]
			        }
                ]
            });
        },
        drawLineChart() {
            this.chartLine = echarts.init(document.getElementById('chartLine'));
            this.chartLine.setOption({
                color:["#E32214","#1890FF"],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['发生异常', '处理异常'],
                    itemWidth:10,
                    itemHeight:10,
                    itemGap:10,
                    icon:"circle",
                    bottom:0
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
			        type: 'category',
			        gridIndexnumber:2,
			        boundaryGap: true,
                    data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12']
                },
                yAxis: {
                    type: 'value',
                    name:"数量(单位:个)"
                },
                series: [
                    {
                        name: '发生异常',
        				smooth: true,
                        type: 'line',
                        stack: '发生异常',
                        lineStyle:{
                        	width:3
                        },
                        data: [15, 22, 19, 23, 19, 40, 29, 20, 25, 29, 22, 18]
                    },
                    {
                        name: '处理异常',
        				smooth: true,
                        type: 'line',
                        stack: '处理异常',
                        lineStyle:{
                        	width:3
                        },
                        data: [25, 41, 40, 28, 23, 18, 40, 45, 30, 34, 30, 32]
                    },
                ]
            });
        },
        drawCharts() {
        	this.drawPieChart()
            this.drawBarChart()
            this.drawLineChart()
        },
	}
}
</script>
<style lang="scss">
.custom_radio_group{
	.el-radio-button--mini .el-radio-button__inner{
		padding: 8px 10px;
		font-size: 14px;
		color: #666;
	}
	.el-radio-button__inner:hover {
	    color: #1089FF;
	}
	.el-radio-button__orig-radio:checked+.el-radio-button__inner{
		border-color: #1089FF;
		background: transparent !important;
		color: #1089FF;
	}
}
</style>
<style lang="scss" scoped>
/*S 统计*/
.c_red{
	color: #E32214;
}
.statistics{
	.tip{
		display: flex;
		align-items: flex-end;
		justify-content: center;
		height:185px;
		font-size: 20px;
		line-height: 44px;
	}
}
.panel{
	display: flex;
	align-items: center;
	width: 100%;
	height: 185px;
	padding: 25px;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0px 3px 5px 0px rgba(211, 209, 209, 0.35);
	&:hover{
		text-decoration: none;
	}
	.icon_wrap{
		width: 50%;
		text-align: center;
	}
	.icon{
		height: 64px;
	}
	.info{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		.tit{
			font-size: 18px;
			color: #333;
		}
		.num{
			font-size: 43px;
		}
		.unit{
			font-size: 26px;
		}
	}
	.desc{
		font-size: 15px;
		color: #666;
	}
}
.panel_01{
	background: linear-gradient(0deg, #CDE7FF, #FFFFFF);
	.tit{
		font-size: 24px;
	}
	.info{
		.num{
			font-size: 46px;
		}
		.unit{
			font-size: 28px;
		}
	}
	.count{
		color: #1890FF;
	}
	.desc{
		font-size: 16px;
	}
}
.panel_02{
	.count{
		color: #F4516C;
	}
}
.panel_03{
	.count{
		color: #6778FA;
	}
}
/*E 统计*/
/*S 设备异常*/
.section{
	margin: 10px 0;
	padding: 30px 32px;
	background: #FFFFFF;
	border-radius: 6px;
}
.section_head{
	display: flex;
	align-items: center;
	.tit{
		position: relative;
		margin-right: 50px;
		margin-bottom: 20px;
		font-size: 20px;
		font-weight: bold;
		color: #333333;
		&::before{
			content: "";
			position: absolute;
			left: -12px;
			top: 0;
			bottom: 0;
			margin: auto 0;
			width: 3px;
			height: 18px;
			background: linear-gradient(180deg, #1890FF, #A2D2FF);
		}
	}
}
.section_01{
	.module_01{
		height: 300px;
		padding-top: 40px;
		color: #E32214;
		.tit{
			font-size: 24px;
			line-height: 32px;
		}
		.icon{
			vertical-align: middle;
			font-size: 32px;
			margin-right: 15px;
		}
		.count{
			padding-left: 18px;
			font-size:20px ;
			.num{
				color: inherit;
				text-decoration: none !important;
				font-weight: 400;
				font-size: 78px;
			}
		}
		.desc{
			margin-top:35px ;
			padding-left: 18px;
			font-size: 14px;
			font-weight: 400;
			color: #666666;
		}
	}
}
/*E 设备异常*/
</style>
